<template>
  <div class="user-container">
    <el-card ref="treecard">
      <template #header>
        <div class="cardHeader">
          <span class="pointer" @click="packup">
            <MIcon name="icon-fold"></MIcon>
          </span>
          组织架构
        </div>
      </template>
      <m-search-tree :fields="treefields" :data="data" :default-expanded-keys="defaultKey" node-key="id"
        @nodeClick="nodeClick"></m-search-tree>
    </el-card>
    <el-card v-if="!packCard">
      <template #header>
        <div class="cardHeader">
          <div class="pointer" @click="unfold">
            <MIcon name="icon-fold"></MIcon>
          </div>
        </div>
      </template>
      <div class="titleList">
        <div class="treeTitle">组</div>
        <div class="treeTitle">织</div>
        <div class="treeTitle">架</div>
        <div class="treeTitle">构</div>
      </div>
    </el-card>

    <el-card header="用户管理">
      <MForm :fields="fields" @submit="search" @cancel="search"> </MForm>

      <MTable :columns="columns" :http="userList" :params="params" v-model:isReload="isReload"
        v-model:selectKeys="selectKeys" rowKey="userId">
        <template #sex="{ value }">
          {{ ['男', '女'][value - 1] ?? '未知' }}
        </template>
        <template #extra>
          <el-button v-if="$checkAuth('systemUserEmpowerBatch')" plain type="primary"
            @click="empower(selectKeys)">批量赋权</el-button>
        </template>

        <template #actions="{ row }">
          <MA v-if="$checkAuth('systemUserEmpower')" type="primary" @click="empower([row.userId], row.roles)">赋权</MA>
          <!-- <MA type="primary" @click="empower([row.id])">取消赋权</MA> -->
        </template>
      </MTable>

      <MFormDialog v-model="formDialog.visible" v-bind="formDialog" :fields="dialogFields" addTitle="赋权"
        :httpAdd="setRole" @reload="reload" :handler="handlerRole" :getHandler="getHandler"></MFormDialog>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { columns, fields, dialogFields } from './config'
import { userList, treeList, roleList, setRole } from '@/api/system/user'
import { ElMessage } from 'element-plus'

const packCard = ref(true)
const treecard = ref()

function packup() {
  treecard.value.$el.style.width = '0px'
  packCard.value = false
}
function unfold() {
  treecard.value.$el.style.width = '252px'
  packCard.value = true
}

defineOptions({
  name: 'SystemUser'
})

const treefields = ref({
  label: 'label',
  children: 'children'
})

const data = ref([
  {
    id: 1,
    name: 'Level one 1',
    children: [
      {
        id: 4,
        name: 'Level two 1-1',
        children: [
          {
            id: 5,
            name: 'Level two 1-1-1'
          }
        ]
      },
      {
        id: 6,
        name: 'Level two 1-2',
        children: [
          {
            id: 7,
            name: 'Level two 1-2-1'
          }
        ]
      }
    ]
  },
  {
    id: 8,
    name: 'Level one 2'
  }
])
const defaultKey = ref<any>([])
treeList().then((res: any) => {
  data.value = res.data
  defaultKey.value = [res.data[0].id]
})
roleList().then((res: any) => {
  if (res.data) {
    fields.find((i) => i.key === 'roleId')!.attrs!.options = res.data.map(
      (i: any) => {
        i = {
          label: i.roleName,
          value: i.roleId
        }
        return i
      }
    )
    dialogFields.find((i) => i.key === 'roles')!.attrs!.options = res.data.map(
      (i: any) => {
        i = {
          label: i.roleName,
          value: i.roleId
        }
        return i
      }
    )
  }
})

// 点击树
const nodeClick = (node: any) => {
  console.log(node)
  params.value = {
    deptId: node.id
  }
}

// 搜索
const params = ref<any>({})
const search = (data: any) => {
  params.value = {
    ...params.value,
    ...data
  }
}

// 新增/编辑
const userIds = ref<number[]>([])
const rolesData = ref<number[]>([])
const formDialog = reactive({
  visible: false
})
const empower = (ids: number[], roles?: number[]) => {
  if (roles) {
    rolesData.value = roles
  }

  if (!ids.length) {
    ElMessage({
      message: '请先选择用户',
      type: 'warning'
    })
  } else {
    formDialog.visible = true
    userIds.value = ids
  }
}
const handlerRole = (data: any) => {
  let newData = []
  newData = userIds.value.map((i: any) => {
    i = {
      userId: i,
      roles: data.roles
    }
    return i
  })

  return newData
}
const getHandler = () => {
  return { roles: rolesData.value }
}

// 重载
const isReload = ref(true)
const reload = () => {
  isReload.value = true
  selectKeys.value = []
  rolesData.value = []
}

// 删除
const selectKeys = ref<number[]>([])
</script>

<style lang="scss" scoped>
.user-container {
  height: 100%;
  display: flex;

  .el-card {
    &:first-child {
      flex-shrink: 0;
      width: 250px;
    }

    &:last-child {
      flex: 1;
      margin-left: 20px;

      .el-card__body {
        display: flex;
        flex-direction: column;
        justify-content: end;
      }
    }
  }
}

.cardHeader {
  text-align: center;
  position: relative;

  span {
    position: absolute;
    left: 0;
    font-size: 22px;
    color: #8e8e8e;
  }

  div {
    font-size: 22px;
    color: #8e8e8e;
    transform: rotateZ(180deg);
  }
}

:deep(.el-card__body) {
  position: relative;
  height: 100%;
}

.titleList {
  height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);

  .treeTitle {
    font-size: 22px;
    font-weight: bold;
    width: 22px;
  }
}

.pointer {
  cursor: pointer;
}
</style>
